<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>
            差值语法：{{name}}
        </h2>

        <hr>
        <h2>
            指令语法 <br>
            <a v-bind:href="jd.url">点我去看{{jd.name}}</a>
            <!-- 简写 -->
            <a :href="jd.url">点我去看{{jd.name}}</a>
        </h2>

    </div>
    
</body>
</html>
<script>
    new Vue({
        el:'#app',
        data:{
            name:'张三',
            jd:{
                name:'京东',
                url:'https://www.jd.com'
            }
        }
    })
</script>

<!-- 
总结：
  Vue模版语法包括两大类：
   差值语法：
     功能：用于解析标签体内容
     写法：{{xxx}} xxx是js表达式 直接读取data
    
   指令语法：
   功能：用于解析标签（标签属性 标签中内容 事件等）
   如：<a v-bind:href="xxx">或简写为<a :href="xxx"> xxx同样是js表达式，可以直接赌气到data中所有属性
    注：Vue中还有很多的指令，形式都是v-xxxx

 -->